<template>
  <div>
    <canvas ref="canvasRef" width="800" height="600"></canvas>
    <button @click="zoomIn">放大</button>
    <button @click="zoomOut">缩小</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import mapImage from '@/assets/images/map.jpg'; 

const canvasRef = ref(null);
const scale = ref(1);
const MIN_SCALE = 0.1;
const MAX_SCALE = 5;
const ZOOM_STEP = 0.05;
const image = new Image();
image.src = mapImage;

// 新增变量用于记录图片的偏移量
const offsetX = ref(0);
const offsetY = ref(0);
// 记录鼠标按下时的位置
const startX = ref(0);
const startY = ref(0);
// 记录鼠标是否按下
const isDragging = ref(false);
// 记录点是否被拖动
const isPointDragging = ref(false);

// 定义要绘制的点的坐标和半径
const pointX = ref(20);
const pointY = ref(30);
const pointRadius = 5;

const drawImage = () => {
  const canvas = canvasRef.value;
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.scale(scale.value, scale.value);
  ctx.translate(offsetX.value / scale.value, offsetY.value / scale.value);
  ctx.drawImage(image, 0, 0);

  // 绘制点
  ctx.beginPath();
  ctx.arc(pointX.value, pointY.value, pointRadius, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();

  ctx.restore();
};

const zoomIn = () => {
  if (scale.value < MAX_SCALE) {
    scale.value += ZOOM_STEP;
    drawImage();
  }
};

const zoomOut = () => {
  if (scale.value > MIN_SCALE) {
    scale.value -= ZOOM_STEP;
    drawImage();
  }
};

const handleWheel = (event) => {
  event.preventDefault();
  const delta = event.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
  const newScale = scale.value + delta;
  if (newScale >= MIN_SCALE && newScale <= MAX_SCALE) {
    scale.value = newScale;
    drawImage();
  }
};

// 处理鼠标按下事件
const handleMouseDown = (event) => {
  const canvas = canvasRef.value;
  const rect = canvas.getBoundingClientRect();
  const clickX = (event.clientX - rect.left - offsetX.value) / scale.value;
  const clickY = (event.clientY - rect.top - offsetY.value) / scale.value;

  const distance = Math.sqrt((clickX - pointX.value) ** 2 + (clickY - pointY.value) ** 2);
  if (distance <= pointRadius) {
    isPointDragging.value = true;
    startX.value = clickX;
    startY.value = clickY;
  } else {
    isDragging.value = true;
    startX.value = event.offsetX;
    startY.value = event.offsetY;
  }
};

// 处理鼠标移动事件
const handleMouseMove = (event) => {
  const canvas = canvasRef.value;
  const rect = canvas.getBoundingClientRect();
  const mouseX = (event.clientX - rect.left - offsetX.value) / scale.value;
  const mouseY = (event.clientY - rect.top - offsetY.value) / scale.value;

  const distance = Math.sqrt((mouseX - pointX.value) ** 2 + (mouseY - pointY.value) ** 2);
  if (distance <= pointRadius) {
    canvas.style.cursor = 'pointer';
  } else {
    canvas.style.cursor = 'default';
  }

  if (isPointDragging.value) {
    const dx = mouseX - startX.value;
    const dy = mouseY - startY.value;

    // 计算新的点位置
    let newX = pointX.value + dx;
    let newY = pointY.value + dy;

    // 限制点的位置在图片范围内
    newX = Math.max(pointRadius, Math.min(newX, image.width - pointRadius));
    newY = Math.max(pointRadius, Math.min(newY, image.height - pointRadius));

    pointX.value = newX;
    pointY.value = newY;

    startX.value = mouseX;
    startY.value = mouseY;

    drawImage();
    console.log(`点拖动到的位置相对于图片: (${pointX.value}, ${pointY.value})`);
  } else if (isDragging.value) {
    const dx = event.offsetX - startX.value;
    const dy = event.offsetY - startY.value;
    offsetX.value += dx;
    offsetY.value += dy;
    startX.value = event.offsetX;
    startY.value = event.offsetY;
    drawImage();
  }
};

// 处理鼠标松开事件
const handleMouseUp = () => {
  isDragging.value = false;
  isPointDragging.value = false;
};

// 处理点击事件
const handleClick = (event) => {
  const canvas = canvasRef.value;
  const rect = canvas.getBoundingClientRect();
  const clickX = (event.clientX - rect.left - offsetX.value) / scale.value;
  const clickY = (event.clientY - rect.top - offsetY.value) / scale.value;

  const distance = Math.sqrt((clickX - pointX.value) ** 2 + (clickY - pointY.value) ** 2);
  if (distance <= pointRadius) {
    console.log('点被点击了！');
    // 这里可以添加点被点击后的逻辑
  }
};

onMounted(() => {
  const canvas = canvasRef.value;
  canvas.addEventListener('wheel', handleWheel);
  canvas.addEventListener('mousedown', handleMouseDown);
  canvas.addEventListener('mousemove', handleMouseMove);
  canvas.addEventListener('mouseup', handleMouseUp);
  canvas.addEventListener('click', handleClick);

  image.onload = () => {
    drawImage();
  };
});
</script>